import React, { Component, lazy, Suspense } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom'
import "../styles/Index.scss"

import Tabbar from '../components/Index/Tabbar';

let Home = lazy(()=>import('./Index/Home'))
let Cate = lazy(()=>import('./Index/Cate'))
let ShopCart = lazy(()=>import('./Index/ShopCart'))
let Mine = lazy(()=>import('./Index/Mine'))
let NotFound = lazy(()=>import('./NotFound'))


class Index extends Component {
    
    render() {
        return (
            <div className='index'>
                <Suspense fallback={<div>loading...</div>}>
                    <Switch>
                        <Route exact path="/index/home" component={Home} />
                        <Route exact path="/index/cate" component={Cate} />
                        <Route exact path="/index/shopcart" component={ShopCart} />
                        <Route exact path="/index/mine" component={Mine} />
                        <Redirect exact from='/index' to="/index/home" />
                        <Route path="*" component={NotFound} />
                    </Switch>
                </Suspense>

                <Tabbar className="tabbar"/>
            </div>
        );
    }
}

export default Index;